/* Shared component library: sections, buttons, cards, tables, process band and FAQ. Used by every custom content page (custom-trade-show-exhibits, trade-show-booth-design, trade-show-booth-rentals). */

/* Sections, headings, intro text */
.tt-cx-section {
  margin-bottom: clamp(2rem, 5vw, 6rem);
}

.tt-cx-section h2,
.tt-cx-process h2 {
  display: block;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 6px;
  color: var(--trade-text);
  font-size: clamp(26px, 2.5vw, 33px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
}

.tt-cx-section h2::after,
.tt-cx-process h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(6, 15, 37, 0.95) 0%,
    rgba(6, 15, 37, 0.6) 75%,
    rgba(6, 15, 37, 0.1) 100%
  );
}

.tt-cx-lead {
  margin: 14px auto 22px;
  color: var(--muted);
  font-size: clamp(16px, 1.24vw, 19px);
  line-height: 1.55;
  text-align: center;
}

/* Buttons */
.tt-cx-btn,
.tt-cx-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border: 1px solid var(--trade-navy-deep);
  border-radius: 10px;
  background: var(--ink-dark);
  color: var(--white);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  transition:
    box-shadow 220ms ease,
    filter 220ms ease;
}

.tt-cx-btn svg,
.tt-trad-intro-cta .tt-trad-cta-btn svg {
  flex: none;
  width: 25px;
  height: 25px;
  margin-left: 4px;
}

.tt-trad-intro-cta .tt-trad-cta-btn {
  font-weight: 600;
}

.tt-cx-btn:hover {
  color: var(--white);
  filter: brightness(1.15);
  box-shadow: 0 6px 16px rgba(6, 15, 37, 0.28);
}

.tt-cx-btn:focus-visible,
.tt-cx-faq-question:focus-visible,
.tt-cx-table-wrap:focus-visible {
  outline: 3px solid var(--trade-focus);
  outline-offset: 2px;
}

/* Cards */
.tt-cx-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.tt-cx-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tt-cx-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tt-cx-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tt-cx-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.tt-cx-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--surface);
}

.tt-cx-card h3 {
margin: 0;
padding: 14px 16px 0;
color: var(--navy-deep);
font-size: 19px;
font-weight: 600;
line-height: 1.25;
}

.tt-cx-card p {
  margin: 6px 0 0;
  padding: 0 16px 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.tt-cx-card .tt-cx-btn {
  margin: auto 16px 16px;
}

/* makes an entire card clickable (e.g. a portfolio item with no visible button) without breaking
   the existing img/h3/p flex-column layout .tt-cx-card already provides */
.tt-cx-card-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.tt-cx-card-link:focus-visible {
  outline: 3px solid var(--trade-focus);
  outline-offset: -2px;
}

.tt-cx-card:has(.tt-cx-card-link:hover) {
  border-color: var(--navy);
  box-shadow: 0 6px 16px rgba(6, 15, 37, 0.12);
}

.tt-cx-card-link:hover h3 {
  color: var(--navy);
}

/* Tables */

/* width:0 + min-width:100% stops the wide table from stretching the surrounding Volusion table cells */
.tt-cx-table-wrap {
  width: 0;
  min-width: 100%;
  overflow-x: auto;
  background: var(--surface);
}

.tt-cx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.4;
}

.tt-cx-table th,
.tt-cx-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  text-align: left;
  vertical-align: middle;
}

.tt-cx-table tbody tr:last-child > * {
  border-bottom: 0;
}

.tt-cx-table tbody th {
  color: var(--navy-deep);
  font-weight: 600;
  white-space: nowrap;
}

/* Comparison table */
.tt-cx-compare-section {
  text-align: center;
}

.tt-cx-compare-section h2::after {
  display: none;
}

.tt-cx-compare-section .tt-cx-lead {
  margin-right: auto;
  margin-left: auto;
}

.tt-cx-compare-section .tt-cx-table-wrap {
  padding: 14px;
  background: transparent;
  text-align: left;
}

.tt-cx-compare {
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 8px 0;
  margin: 0 -8px;
  width: calc(100% + 16px);
  table-layout: fixed;
}

/* label column: plain % (clamp() with % is ignored by fixed table layout) */
.tt-cx-compare thead td {
  width: 19%;
}

.tt-cx-compare thead td,
.tt-cx-compare thead th {
  padding: 0px;
  border: 0;
  background: none;
  vertical-align: bottom;
}

.tt-cx-compare tbody th,
.tt-cx-compare tbody td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  font-size: 17px;
  text-align: center;
}

.tt-cx-compare tbody td {
  position: relative;
  padding: 0;
}

/* each value labels its tier's radio, so a click anywhere in the column selects that tier */
.tt-cx-cell {
  display: block;
  margin: 0;
  padding: 15px 14px;
  color: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.tt-cx-cell::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tt-cx-compare tbody th {
  border-bottom: 2px solid var(--surface);
  border-radius: 4px;
  background: var(--surface-muted);
  text-align: left;
  white-space: normal;
  padding-right: 16px;
}

/* the whole header card is one radio label; the template gives label a bottom margin, hence margin: 0 */
.tt-cx-pick {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  border-radius: 8px 8px 0 0;
  background: var(--surface);
  cursor: pointer;
}

.tt-cx-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tt-cx-pick:has(input:focus-visible) {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.tt-cx-pick-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  color: var(--navy-deep);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.tt-cx-pick:hover .tt-cx-pick-title {
  background: var(--surface-hover);
}

.tt-cx-pick img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--surface);
}

.tt-cx-pick:has(input:checked) .tt-cx-pick-title {
  background: var(--navy);
  color: var(--white);
}

/* Cost table */
.tt-cx-price-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
}

.tt-cx-price {
  min-width: 560px;
}

.tt-cx-price thead th {
  font-weight: 600;
  background: var(--navy);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.22);
}

.tt-cx-price th,
.tt-cx-price td {
  border: 1px solid var(--border);
}

.tt-cx-price tr > :first-child {
  border-left: 0;
}

.tt-cx-price tr > :last-child {
  border-right: 0;
}

.tt-cx-price thead tr > * {
  border-top: 0;
}

.tt-cx-price tbody td:nth-child(2) {
  color: var(--navy-deep);
  font-weight: 600;
  white-space: nowrap;
}

/* Process */
.tt-cx-process {
  width: calc(100% + (clamp(12px, 5.5vw, 100px) + 15px) * 2) !important;
  margin: 0 calc(-1 * (clamp(12px, 5.5vw, 100px) + 15px))
    clamp(2rem, 5vw, 6rem);
  padding: clamp(36px, 5vw, 64px) clamp(16px, 4vw, 56px);
  background-color: #f7f9fc;
  background-image: url("https://ik.imagekit.io/triyanshi/TSD/Hero-Banner-Background.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}

.tt-cx-process-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.tt-cx-process .tt-cx-lead {
  margin: 14px auto 0;
}

.tt-cx-steps {
  --tt-cx-gap: 28px;
  --tt-cx-circle: 76px;
  list-style: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--tt-cx-gap);
  counter-reset: tt-cx-step;
}

.tt-cx-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  counter-increment: tt-cx-step;
}

.tt-cx-step-icon {
  display: grid;
  place-items: center;
  width: var(--tt-cx-circle);
  height: var(--tt-cx-circle);
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 6px rgba(13, 39, 84, 0.12);
  color: var(--white);
}

.tt-cx-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--tt-cx-circle) / 2 - 7px);
  left: calc(50% + var(--tt-cx-circle) / 2 + 14px);
  width: calc(100% + var(--tt-cx-gap) - var(--tt-cx-circle) - 28px);
  height: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='14' viewBox='0 0 9 14'%3E%3Cpath d='M1.5 1.5L7.5 7l-6 5.5' fill='none' stroke='%23c9953d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      right center / 9px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left center / calc(100% - 2px) 2px no-repeat;
}

.tt-cx-steps li::before {
  content: counter(tt-cx-step, decimal-leading-zero);
  order: 1;
  margin-bottom: 4px;
  color: var(--navy-deep);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.tt-cx-steps h3 {
  order: 2;
  margin: 0 0 6px;
  color: var(--navy-deep);
  font-weight: 600;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.25;
}

.tt-cx-time {
  order: 3;
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
}

.tt-cx-steps p {
  order: 4;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

/* line the steps up row by row even when some titles wrap and others don't */
@supports (grid-template-rows: subgrid) {
  .tt-cx-steps {
    row-gap: 0;
  }

  .tt-cx-steps li {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    align-content: start;
  }

  .tt-cx-step-icon {
    grid-row: 1;
    justify-self: center;
  }

  .tt-cx-steps li::before {
    grid-row: 2;
  }

  .tt-cx-steps h3 {
    grid-row: 3;
    align-self: start;
  }

  .tt-cx-time {
    grid-row: 4;
    align-self: start;
  }

  .tt-cx-steps p {
    grid-row: 5;
    align-self: start;
  }
}

/* Badges: a row of plain icon items, not a sequence, so no numbering or connecting arrows */
.tt-cx-badges {
  list-style: none;
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.tt-cx-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}

.tt-cx-badge-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 6px rgba(13, 39, 84, 0.12);
  color: var(--white);
}

/* photo variant of the badge icon: a small product thumbnail instead of an icon glyph.
   Selector is nested (3 classes) on purpose: Volusion's Content Builder wraps pasted content in
   ".vcb-snippet:not(.vcb-custom) img { max-width:100%; height:auto }", which outranks a single
   class selector and stretches these into the image's own aspect ratio instead of a fixed square. */
.tt-cx-badges .tt-cx-badge .tt-cx-badge-photo {
  display: block;
  width: 100%;
  max-width: 130px;
  height: 130px;
  margin-bottom: 12px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.tt-cx-badge h3 {
  margin: 0 0 4px;
  color: var(--navy-deep);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.tt-cx-badge p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* FAQ */
.tt-cx-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  align-items: start;
}

.tt-cx-faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.tt-cx-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--navy-deep);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.tt-cx-faq-question::after {
  content: "+";
  flex: none;
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
}

.tt-cx-faq-question[aria-expanded="true"]::after {
  content: "\2212";
}

.tt-cx-faq-answer p {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.tt-cx-faq-answer a {
  color: var(--navy);
  font-weight: 600;
}

/* Responsive: min-width (ascending), then max-width (descending) */

/* hero, two columns: the image column is as tall as the copy (heading top to button bottom) */
@media (min-width: 861px) {
  .tt-cx-hero .tt-trad-hero-panel {
    align-items: stretch;
  }

  .tt-cx-hero .tt-trad-hero-media {
    padding: clamp(10px, 1.4vw, 18px) clamp(8px, 1.2vw, 18px) calc(clamp(80px, 8vw, 100px) + 20px) 0;
  }

  /* height:0 + min-height:100% fills the column without the image's own size stretching the row */
  .tt-cx-hero .tt-trad-hero-media img {
    width: 100%;
    height: 0;
    min-height: 100%;
    object-fit: contain;
    object-position: center top;
  }
}

@media (min-width: 861px) and (max-width: 1120px) {
  .tt-cx-hero .tt-trad-hero-media {
    padding-top: clamp(10px, 1.8vw, 16px);
    padding-bottom: calc(clamp(94px, 12vw, 120px) + 20px);
  }
}

/* comparison table, desktop: label column + 3 tiers, no gaps; a hovered or selected tier recolours its own edges and adds a 1px inner line, so geometry never changes */
@media (min-width: 901px) {
  .tt-cx-compare {
    width: 100%;
    margin: 0;
    border-spacing: 0;
  }

  .tt-cx-compare thead th {
    border: 0;
    border-radius: 10px 10px 0 0;
  }

  .tt-cx-compare tbody th,
  .tt-cx-compare tbody td {
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

  .tt-cx-compare tbody th {
    border-left: 1px solid var(--border);
  }

  .tt-cx-compare tbody tr:first-child > * {
    border-top: 1px solid var(--border);
  }

  .tt-cx-compare tbody tr:last-child > * {
    border-bottom: 1px solid var(--border);
  }

  .tt-cx-compare tbody tr:first-child th {
    border-top-left-radius: 10px;
  }

  .tt-cx-compare tbody tr:last-child th {
    border-bottom-left-radius: 10px;
  }

  /* --xNc: boundary N colour (0 = left of tier 1 ... 3 = right of tier 3); --cN: tier N's top, bottom and inner-line colour. Set only while hovered or selected. */
  .tt-cx-compare:has(thead th:nth-child(2):hover, tbody td:nth-child(2):hover) {
    --x0c: #8ea1c2; --x1c: #8ea1c2; --c1: #8ea1c2;
  }

  .tt-cx-compare:has(thead th:nth-child(3):hover, tbody td:nth-child(3):hover) {
    --x1c: #8ea1c2; --x2c: #8ea1c2; --c2: #8ea1c2;
  }

  .tt-cx-compare:has(thead th:nth-child(4):hover, tbody td:nth-child(4):hover) {
    --x2c: #8ea1c2; --x3c: #8ea1c2; --c3: #8ea1c2;
  }

  /* selected comes after hover so it wins a shared boundary */
  .tt-cx-compare:has(thead th:nth-child(2) input:checked) {
    --x0c: var(--navy); --x1c: var(--navy); --c1: var(--navy);
  }

  .tt-cx-compare:has(thead th:nth-child(3) input:checked) {
    --x1c: var(--navy); --x2c: var(--navy); --c2: var(--navy);
  }

  .tt-cx-compare:has(thead th:nth-child(4) input:checked) {
    --x2c: var(--navy); --x3c: var(--navy); --c3: var(--navy);
  }

  .tt-cx-compare thead th:nth-child(2),
  .tt-cx-compare tbody td:nth-child(2) {
    border-left: 1px solid var(--x0c, var(--border));
  }

  .tt-cx-compare thead th:nth-child(3),
  .tt-cx-compare tbody td:nth-child(3) {
    border-left: 1px solid var(--x1c, var(--border));
  }

  .tt-cx-compare thead th:nth-child(4),
  .tt-cx-compare tbody td:nth-child(4) {
    border-left: 1px solid var(--x2c, var(--border));
    border-right: 1px solid var(--x3c, var(--border));
  }

  .tt-cx-compare thead th:nth-child(2) {
    border-top: 1px solid var(--c1, var(--border));
  }

  .tt-cx-compare thead th:nth-child(3) {
    border-top: 1px solid var(--c2, var(--border));
  }

  .tt-cx-compare thead th:nth-child(4) {
    border-top: 1px solid var(--c3, var(--border));
  }

  .tt-cx-compare tbody tr:last-child td:nth-child(2) {
    border-bottom: 1px solid var(--c1, var(--border));
  }

  .tt-cx-compare tbody tr:last-child td:nth-child(3) {
    border-bottom: 1px solid var(--c2, var(--border));
  }

  .tt-cx-compare tbody tr:last-child td:nth-child(4) {
    border-bottom: 1px solid var(--c3, var(--border));
  }

  .tt-cx-compare thead th:nth-child(2) .tt-cx-pick,
  .tt-cx-compare tbody td:nth-child(2) {
    --ct: var(--c1);
  }

  .tt-cx-compare thead th:nth-child(3) .tt-cx-pick,
  .tt-cx-compare tbody td:nth-child(3) {
    --ct: var(--c2);
  }

  .tt-cx-compare thead th:nth-child(4) .tt-cx-pick,
  .tt-cx-compare tbody td:nth-child(4) {
    --ct: var(--c3);
  }

  .tt-cx-compare tbody td {
    box-shadow:
      inset 1px 0 0 var(--ct, transparent),
      inset -1px 0 0 var(--ct, transparent);
  }

  .tt-cx-compare tbody tr:last-child td {
    box-shadow:
      inset 1px 0 0 var(--ct, transparent),
      inset -1px 0 0 var(--ct, transparent),
      inset 0 -1px 0 var(--ct, transparent);
  }

  .tt-cx-pick {
    border-radius: 9px 9px 0 0;
  }

  .tt-cx-pick::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
      inset 1px 0 0 var(--ct, transparent),
      inset -1px 0 0 var(--ct, transparent),
      inset 0 1px 0 var(--ct, transparent);
  }

  .tt-cx-compare:has(thead th:nth-child(2) input:checked) tbody td:nth-child(2),
  .tt-cx-compare:has(thead th:nth-child(3) input:checked) tbody td:nth-child(3),
  .tt-cx-compare:has(thead th:nth-child(4) input:checked) tbody td:nth-child(4) {
    color: var(--navy-deep);
    font-weight: 600;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .tt-cx-pick-title {
    min-height: calc(2 * 1.25em + 28px);
  }
}

@media (min-width: 901px) and (max-width: 1300px) {
  .tt-cx-compare thead td {
    width: 23%;
  }
}

/* wide screens: filling the height only trims the PNG's empty side margins; below this it would clip the booth */
@media (min-width: 1160px) {
  .tt-cx-hero .tt-trad-hero-media img {
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 1200px) {
  .tt-cx-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* process steps become a vertical timeline */
@media (max-width: 1100px) {
  .tt-cx-steps {
    --tt-cx-circle: 64px;
    --tt-cx-col-gap: 20px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
  }

  .tt-cx-steps li {
    display: grid;
    grid-template-columns: calc(var(--tt-cx-circle) + var(--tt-cx-col-gap)) auto minmax(0, 1fr);
    grid-template-rows: none;
    grid-row: auto;
    align-content: start;
    padding-bottom: 40px;
    text-align: left;
  }

  .tt-cx-steps li:last-child {
    padding-bottom: 0;
  }

  .tt-cx-step-icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    justify-self: start;
    margin: 0;
  }

  .tt-cx-steps li::before {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
    margin: 0 10px 0 0;
  }

  .tt-cx-steps h3 {
    grid-column: 3;
    grid-row: 1;
    align-self: baseline;
    margin: 0 0 4px;
  }

  .tt-cx-time {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-bottom: 6px;
  }

  .tt-cx-steps p {
    grid-column: 2 / -1;
    grid-row: 3;
  }

  .tt-cx-steps li:not(:last-child)::after {
    top: calc(var(--tt-cx-circle) + 8px);
    bottom: 8px;
    left: calc(var(--tt-cx-circle) / 2 - 7px);
    width: 14px;
    height: auto;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5L7 7.5l5.5-6' fill='none' stroke='%23c9953d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center bottom / 14px 9px no-repeat,
      linear-gradient(var(--gold), var(--gold)) center top / 2px calc(100% - 2px) no-repeat;
  }
}

@media (max-width: 1024px) {
  .tt-cx-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tt-cx-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* comparison table: tier cards on top, the selected tier's values listed below */
@media (max-width: 900px) {
  @supports selector(:has(*)) {
    .tt-cx-compare-section .tt-cx-table-wrap {
      padding: 0;
      border: 0;
    }

    .tt-cx-compare,
    .tt-cx-compare thead,
    .tt-cx-compare tbody,
    .tt-cx-compare tr {
      display: block;
      width: 100%;
      min-width: 0;
      margin: 0;
    }

    .tt-cx-compare thead td {
      display: none;
    }

    .tt-cx-compare thead tr {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 14px;
    }

    .tt-cx-compare thead th {
      display: block;
      width: auto;
    }

    .tt-cx-pick {
      height: 100%;
      border: 2px solid transparent;
      border-radius: 10px;
    }

    .tt-cx-pick:hover {
      border-color: #8ea1c2;
    }

    .tt-cx-pick:has(input:checked) {
      border-color: var(--navy);
    }

    .tt-cx-pick-title {
      padding: 10px 6px;
      font-size: clamp(13px, 2.6vw, 17px);
    }

    .tt-cx-pick img {
      padding: 4px;
    }

    .tt-cx-compare tbody tr {
      display: grid;
      grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
      gap: 8px;
      margin-bottom: 8px;
    }

    .tt-cx-compare tbody th {
      display: flex;
      align-items: center;
      white-space: normal;
    }

    .tt-cx-compare tbody td {
      display: none;
      border: 0;
      border-bottom: 1px solid var(--line-soft);
    }

    .tt-cx-compare tbody tr:last-child td {
      border-bottom: 1px solid var(--line-soft);
    }

    .tt-cx-compare:has(thead th:nth-child(2) input:checked) tbody td:nth-child(2),
    .tt-cx-compare:has(thead th:nth-child(3) input:checked) tbody td:nth-child(3),
    .tt-cx-compare:has(thead th:nth-child(4) input:checked) tbody td:nth-child(4) {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

@media (max-width: 720px) {
  .tt-cx-grid-3,
  .tt-cx-grid-4,
  .tt-cx-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .tt-cx-faq {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tt-cx-steps {
    --tt-cx-circle: 56px;
    --tt-cx-col-gap: 16px;
  }

  .tt-cx-step-icon svg {
    width: 28px;
    height: 28px;
  }

  .tt-cx-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .tt-cx-grid-3,
  .tt-cx-grid-4,
  .tt-cx-grid-5 {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-cx-btn {
    transition: none;
  }
}

/* Trade Show Booth Design page. Reuses the hero, section, card, button and FAQ rules above. */

.tt-bd-hero .tt-trad-hero-media {
  mix-blend-mode: multiply;
}

#tt-bd-space .tt-cx-btn {
  padding-right: 12px;
  padding-left: 12px;
  font-size: 16px;
}

.tt-bd-principles {
  list-style: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  --tt-bd-circle: 64px;
  --tt-bd-gap: 20px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px var(--tt-bd-gap);
  counter-reset: tt-bd-principle;
}

.tt-bd-principles li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  counter-increment: tt-bd-principle;
}

.tt-bd-icon {
  display: grid;
  place-items: center;
  width: var(--tt-bd-circle);
  height: var(--tt-bd-circle);
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 6px rgba(13, 39, 84, 0.12);
  color: var(--white);
}

.tt-bd-principles li::before {
  content: counter(tt-bd-principle, decimal-leading-zero);
  order: 1;
  margin-bottom: 4px;
  color: var(--navy-deep);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.tt-bd-principles h3 {
  order: 2;
  margin: 0 0 6px;
  color: var(--navy-deep);
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.25;
}

.tt-bd-principles p {
  order: 3;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.tt-bd-principles a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.tt-bd-principles a:hover {
  text-decoration: underline;
}

.tt-bd-principles li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--tt-bd-circle) / 2 - 7px);
  left: calc(50% + var(--tt-bd-circle) / 2 + 14px);
  width: calc(100% + var(--tt-bd-gap) - var(--tt-bd-circle) - 28px);
  height: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='14' viewBox='0 0 9 14'%3E%3Cpath d='M1.5 1.5L7.5 7l-6 5.5' fill='none' stroke='%23c9953d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      right center / 9px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left center / calc(100% - 2px) 2px no-repeat;
}

.tt-cx-process.tt-bd-band {
  padding-bottom: clamp(20px, 2.5vw, 32px);
}

.tt-bd-center {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 36px);
}

.tt-bd-artwork {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

.tt-bd-artwork-media {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* .tt-bd-artwork-media.tt-bd-artwork-media (repeated) beats Volusion's Content Builder wrapper rule
   (".vcb-snippet:not(.vcb-custom) img", 2 classes + element) that would otherwise force height:auto
   here and collapse this fill-the-box image back to its own aspect ratio */
.tt-bd-artwork-media.tt-bd-artwork-media img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-bd-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 14px;
}

.tt-bd-checklist li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.4;
  text-align: left;
}

.tt-bd-checklist svg {
  flex: none;
  box-sizing: content-box;
  padding: 10px;
  color: var(--white);
  background: var(--navy);
  border-radius: 50%;
}

.tt-bd-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.tt-bd-show {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "stage"
    "thumbs"
    "info";
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.tt-bd-tab {
  position: absolute;
  top: 0;
  left: 0;
  grid-area: thumbs;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.tt-bd-stage {
  position: relative;
  grid-area: stage;
  height: 0;
  padding-bottom: 66.6667%;
  overflow: hidden;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--border);
}

.tt-bd-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 250ms ease,
    visibility 250ms;
}

/* repeated class: see .tt-bd-artwork-media.tt-bd-artwork-media img above for why */
.tt-bd-view.tt-bd-view img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tt-bd-view figcaption {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  background: var(--navy);
  border-radius: 999px;
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.tt-bd-tab-1:checked ~ .tt-bd-stage .tt-bd-view-1,
.tt-bd-tab-2:checked ~ .tt-bd-stage .tt-bd-view-2,
.tt-bd-tab-3:checked ~ .tt-bd-stage .tt-bd-view-3 {
  opacity: 1;
  visibility: visible;
}

.tt-bd-thumbs {
  display: grid;
  grid-area: thumbs;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tt-bd-thumb {
  display: block;
  margin: 0;
  cursor: pointer;
  text-align: center;
}

.tt-bd-thumb-shot {
  position: relative;
  display: block;
  height: 0;
  padding-bottom: 66.6667%;
  overflow: hidden;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--border);
  transition: box-shadow 180ms ease;
}

/* repeated class: see .tt-bd-artwork-media.tt-bd-artwork-media img above for why */
.tt-bd-thumb-shot.tt-bd-thumb-shot img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tt-bd-thumb-label {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.tt-bd-thumb:hover .tt-bd-thumb-shot {
  box-shadow: 0 0 0 2px var(--gold);
}

.tt-bd-tab-1:checked ~ .tt-bd-thumbs .tt-bd-thumb-1 .tt-bd-thumb-shot,
.tt-bd-tab-2:checked ~ .tt-bd-thumbs .tt-bd-thumb-2 .tt-bd-thumb-shot,
.tt-bd-tab-3:checked ~ .tt-bd-thumbs .tt-bd-thumb-3 .tt-bd-thumb-shot {
  box-shadow: 0 0 0 3px var(--navy);
}

.tt-bd-tab-1:checked ~ .tt-bd-thumbs .tt-bd-thumb-1 .tt-bd-thumb-label,
.tt-bd-tab-2:checked ~ .tt-bd-thumbs .tt-bd-thumb-2 .tt-bd-thumb-label,
.tt-bd-tab-3:checked ~ .tt-bd-thumbs .tt-bd-thumb-3 .tt-bd-thumb-label {
  color: var(--navy-deep);
}

.tt-bd-tab-1:focus-visible ~ .tt-bd-thumbs .tt-bd-thumb-1 .tt-bd-thumb-shot,
.tt-bd-tab-2:focus-visible ~ .tt-bd-thumbs .tt-bd-thumb-2 .tt-bd-thumb-shot,
.tt-bd-tab-3:focus-visible ~ .tt-bd-thumbs .tt-bd-thumb-3 .tt-bd-thumb-shot {
  outline: 3px solid var(--trade-focus);
  outline-offset: 3px;
}

.tt-bd-info {
  display: flex;
  grid-area: info;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.tt-bd-info h3 {
  margin: 0;
  color: var(--navy-deep);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.tt-bd-info p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.tt-bd-info .tt-cx-btn {
  align-self: stretch;
  margin-top: auto;
}

@media (min-width: 760px) {
  .tt-bd-show {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas:
      "stage info"
      "thumbs info";
    column-gap: 28px;
    align-items: start;
    padding: 20px;
  }

  .tt-bd-stage {
    grid-area: stage;
  }

  .tt-bd-thumbs {
    grid-area: thumbs;
  }

  .tt-bd-info {
    grid-area: info;
    align-self: center;
  }

  .tt-bd-info h3 {
    font-size: 22px;
  }
}

@media (min-width: 1200px) {
  .tt-bd-stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tt-bd-show {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "stage"
      "thumbs"
      "info";
    padding: 16px;
  }

  .tt-bd-info {
    align-self: stretch;
  }

  .tt-bd-info h3 {
    font-size: 20px;
  }
}

@media (max-width: 1100px) {
  .tt-bd-principles {
    --tt-bd-circle: 64px;
    --tt-bd-col-gap: 20px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
  }

  .tt-bd-principles li {
    display: grid;
    grid-template-columns: calc(var(--tt-bd-circle) + var(--tt-bd-col-gap)) auto minmax(0, 1fr);
    align-content: start;
    padding-bottom: 40px;
    text-align: left;
  }

  .tt-bd-principles li:last-child {
    padding-bottom: 0;
  }

  .tt-bd-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: start;
    margin: 0;
  }

  .tt-bd-principles li::before {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
    margin: 0 10px 0 0;
  }

  .tt-bd-principles h3 {
    grid-column: 3;
    grid-row: 1;
    align-self: baseline;
    margin: 0 0 4px;
    font-size: clamp(17px, 2.4vw, 19px);
  }

  .tt-bd-principles p {
    grid-column: 2 / -1;
    grid-row: 2;
    font-size: 16px;
  }

  .tt-bd-principles li:not(:last-child)::after {
    top: calc(var(--tt-bd-circle) + 8px);
    bottom: 8px;
    left: calc(var(--tt-bd-circle) / 2 - 7px);
    width: 14px;
    height: auto;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5L7 7.5l5.5-6' fill='none' stroke='%23c9953d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center bottom / 14px 9px no-repeat,
      linear-gradient(var(--gold), var(--gold)) center top / 2px calc(100% - 2px) no-repeat;
  }
}

@media (max-width: 900px) {
  .tt-bd-artwork {
    grid-template-columns: minmax(0, 1fr);
  }

  .tt-bd-artwork-media {
    height: 0;
    min-height: 0;
    padding-bottom: 66.6667%;
  }

  .tt-bd-checklist {
    grid-auto-rows: auto;
  }
}

@media (max-width: 640px) {
  .tt-bd-principles {
    --tt-bd-circle: 56px;
    --tt-bd-col-gap: 16px;
  }

  .tt-bd-icon svg {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 480px) {
  .tt-cx-btn {
    padding-right: 16px;
    padding-left: 16px;
  }

  .tt-bd-show {
    padding: 12px;
  }

  .tt-bd-thumbs {
    gap: 8px;
  }

  .tt-bd-thumb-label {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-bd-view,
  .tt-bd-thumb-shot {
    transition: none;
  }
}

/* Trade Show Booth Rentals page. Reuses the hero, section, card, table, process and FAQ rules above. */

.tt-rent-compare-table tbody td:nth-child(2) {
  color: var(--text);
  font-weight: 400;
  white-space: normal;
}

.tt-rent-included {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}

.tt-rent-included .tt-bd-artwork-media img {
  box-sizing: border-box;
  object-fit: contain;
  padding: 12px;
}

.tt-rent-included h3 {
  margin: 0 0 14px;
  color: var(--navy-deep);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.tt-bd-checklist.tt-rent-why svg {
  background: var(--gold);
}

@media (min-width: 1101px) {
  .tt-cx-steps.tt-rent-timeline-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    --tt-cx-circle: 68px;
  }
}

@media (max-width: 1100px) {
  .tt-rent-included {
    grid-template-columns: minmax(0, 1fr);
  }

  .tt-rent-included .tt-bd-artwork-media {
    height: 0;
    min-height: 0;
    padding-bottom: 56%;
  }
}

/* Trade Show Graphics & Printing page. Reuses the hero, section, card, table, badges and process rules above. */

.tt-gfx-materials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.tt-gfx-material {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.tt-gfx-material-media {
  flex: none;
  width: 110px;
  height: 110px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-muted);
}

/* repeated class: see .tt-bd-artwork-media.tt-bd-artwork-media img above for why */
.tt-gfx-material-media.tt-gfx-material-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-gfx-material-body {
  min-width: 0;
}

.tt-gfx-material h3 {
  margin: 0 0 10px;
  color: var(--navy-deep);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

.tt-gfx-material ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.tt-gfx-material li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.tt-gfx-material li svg {
  flex: none;
  margin-top: 2px;
  color: var(--gold);
}

/* Replacement graphics: all 8 badges in a single row, matching the reference layout exactly */
.tt-cx-badges.tt-gfx-badges-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 16px;
}

/* Responsive: min-width (ascending), then max-width (descending) */

@media (max-width: 1100px) {
  .tt-cx-badges.tt-gfx-badges-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .tt-gfx-materials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tt-cx-badges.tt-gfx-badges-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .tt-gfx-materials {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* --------------------------------------------------------------------------------------------------------------------------- */
/* Trade Show Displays overview page. Reuses the hero, section, card, badges and process rules above. */

.tt-cx-grid-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* flat badges: plain icon items with no card border/background, sitting directly on the section band */
.tt-cx-badges.tt-home-why-flat .tt-cx-badge {
  padding: 0;
  background: none;
  border: 0;
}

/* larger industry photos than the shared 130px badge-photo size (only 5 items, more room per column) */
.tt-cx-badges.tt-home-industries .tt-cx-badge .tt-cx-badge-photo {
  max-width: 200px;
  height: 200px;
}

/* JotForm reviews widget renders its own styled-components CSS at runtime, after ours, so its
   generated classes win on source order alone; !important is needed to reliably override it. */
#JFWebsiteWidget-01a0ce20e750700084ca3e740f24b3f06816 .jf-reviews-card-text,
#JFWebsiteWidget-01a0ce20e750700084ca3e740f24b3f06816 .jf-reviews-card-text span {
  font-size: 15px !important;
}

#JFWebsiteWidget-01a0ce20e750700084ca3e740f24b3f06816 .jf-reviews-reviewer-name {
  font-size: 16px !important;
}

/* Responsive: min-width (ascending), then max-width (descending) */

@media (max-width: 1100px) {
  .tt-cx-grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tt-cx-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Trade Show Booth Cost page. Reuses the hero, section, table, card, process and badges rules above. */

/* 5-column price table needs more room than the shared 560px min-width. */
.tt-cost-table {
  min-width: 900px;
}

/* flat badges: plain icon items with no card border/background, sitting directly on the section band */
.tt-cx-badges.tt-cost-flat-badges .tt-cx-badge {
  padding: 0;
  background: none;
  border: 0;
}

/* "The Costs Exhibitors Forget" has 7 items, which doesn't divide evenly into the shared 5-column
   grid (wraps 5+2 with the last row stuck on the left). Flex-wrap + centering fixes that at any
   item count or width, instead of picking one fixed column count that only works at one breakpoint. */
.tt-cx-badges.tt-cost-forget-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tt-cost-forget-badges.tt-cx-badges .tt-cx-badge {
  flex: 1 1 150px;
  max-width: 190px;
}

/* "What a Trade Show Booth Actually Costs": itemized example cards (real starting prices only, no
   invented line-item breakdown) instead of the plain img/h3/p card used elsewhere on this page. */
.tt-cost-example-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.tt-cost-example-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.tt-cost-example-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 20px 20px;
}

.tt-cost-example-body h3 {
  margin: 0 0 12px;
  color: var(--navy-deep);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.tt-cost-example-body h3 span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.tt-cost-example-body dl {
  margin: 0 0 14px;
  padding: 0;
}

.tt-cost-example-body dl > div {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.tt-cost-example-body dt {
  margin: 0;
  flex: none;
  color: var(--muted);
}

.tt-cost-example-body dd {
  flex: 1;
  margin: 0;
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

.tt-cost-example-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 16px;
  padding-top: 12px;
  color: var(--navy-deep);
  font-size: 15px;
  font-weight: 600;
}

.tt-cost-example-total strong {
  font-size: 22px;
  font-weight: 700;
}

.tt-cost-example-body .tt-cx-btn {
  margin-top: auto;
}

/* Responsive: min-width (ascending), then max-width (descending) */

@media (max-width: 640px) {
  .tt-cost-forget-badges.tt-cx-badges .tt-cx-badge {
    flex-basis: 130px;
  }
}

/* Article template: shared by the six planning-guide articles. A plain, left-aligned editorial
   layout (not another marketing section), reusing the site's navy/gold tokens and button style. */

.tt-article {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 88px);
}

.tt-article-meta {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
}

.tt-article-header h1 {
  margin: 0 0 14px;
  color: var(--navy-deep);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
}

.tt-article-lead {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 19px;
  line-height: 1.6;
}

.tt-article-body {
  margin-top: clamp(24px, 4vw, 36px);
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
}

.tt-article-body h2 {
  margin: 2em 0 0.6em;
  color: var(--navy-deep);
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 700;
  line-height: 1.25;
}

.tt-article-body h3 {
  margin: 1.6em 0 0.5em;
  color: var(--navy-deep);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.tt-article-body p {
  margin: 0 0 1.1em;
}

.tt-article-body ul,
.tt-article-body ol {
  margin: 0 0 1.3em;
  padding-left: 1.3em;
}

.tt-article-body li {
  margin-bottom: 0.5em;
}

.tt-article-body a {
  color: var(--navy);
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

.tt-article-body a:hover {
  text-decoration-color: currentColor;
}

.tt-article-body strong {
  color: var(--navy-deep);
}

/* diagram figure */
.tt-article-figure {
  margin: 2em 0;
  padding: clamp(16px, 3vw, 28px);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}

.tt-article-figure svg,
.tt-article-figure .tt-article-timeline {
  max-width: 100%;
}

.tt-article-figure figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* end-of-article CTA: three real commercial links, not another badge/card grid */
.tt-article-links {
  margin-top: clamp(32px, 5vw, 48px);
  padding: clamp(20px, 3vw, 28px);
  background: var(--navy-deep);
  border-radius: 12px;
}

.tt-article-links h2 {
  margin: 0 0 6px;
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
}

.tt-article-links p {
  margin: 0 0 16px;
  color: var(--gold-soft);
  font-size: 15px;
}

.tt-article-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.tt-article-link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease;
}

.tt-article-link-list a:hover {
  background: rgba(255, 255, 255, 0.14);
}

.tt-article-link-list svg {
  flex: none;
  color: var(--gold);
}

/* simple horizontal timeline used by the booth-checklist article (HTML/CSS, no SVG needed) */
.tt-article-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}

.tt-article-timeline li {
  list-style: none;
  margin: 0;
}

.tt-article-timeline-week {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
}

.tt-article-timeline h3 {
  margin: 0 0 4px;
  color: var(--navy-deep);
  font-size: 15px;
  font-weight: 600;
}

.tt-article-timeline p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .tt-article-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .tt-article-timeline {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Trade Show Blog hub page. Reuses the hero, section, grid and badges rules above. */

/* featured resource cards: photo with a category tag, title, excerpt and a text CTA */
.tt-blog-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.tt-blog-card-media {
  position: relative;
}

.tt-blog-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.tt-blog-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--navy-deep);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tt-blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 18px;
}

.tt-blog-card-body h3 {
  margin: 0 0 8px;
  color: var(--navy-deep);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.tt-blog-card-body p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.tt-blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
}

.tt-blog-card:has(.tt-cx-card-link:hover) {
  border-color: var(--navy);
  box-shadow: 0 6px 16px rgba(6, 15, 37, 0.12);
}

/* .tt-blog-card-media has position:relative (for the tag badge), which paints over the card-link's
   own focus outline where they overlap the image, leaving only the text half ringed. Move the
   ring to the card itself, drawn outside its border, so nothing can paint over part of it. */
.tt-blog-card .tt-cx-card-link:focus-visible {
  outline: none;
}

.tt-blog-card:has(.tt-cx-card-link:focus-visible) {
  outline: 3px solid var(--trade-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .tt-blog-card-cta svg {
    transition: transform 180ms ease;
  }

  .tt-blog-card .tt-cx-card-link:hover .tt-blog-card-cta svg {
    transform: translateX(3px);
  }
}